<template>
  <!-- 辅助组件按钮 -->
  <el-tag
    type="success"
    class="components"
    :style="style"
    draggable
    @dragstart="dragstart($event, 'buttonComponents')"
    @dragend.prevent.stop="dragend"
    >1111{{ style }}</el-tag
  >
</template>
<script lang="ts">
  // 在vue2中 data 在vue3中使用 reactive代替
  import { reactive, computed, Prop } from 'vue'
  import ButtonStyle from './module/button'
  export default {
    props: {
      propValue: ButtonStyle,
      number: Number
    },
    setup(props: any, context: any) {
      const style = computed(() => {
        console.log(props.propValue)
        return props.propValue
      })

      //当单击下鼠标，并移动之后执行。
      const dragstart = (val: any, str: string) => {
        val.dataTransfer.setData('my-info', str)
        val.dataTransfer.setData('my-number', props.number)
      }
      // 当正在拖拽的元素的标记进入某个Dom元素时触发，自身首先会触发。被进入的Dom元素会触发这个事件。
      const dragend = (val: any) => {
        console.log(val)
      }
      return {
        style,
        dragstart,
        dragend, // 拖拽进入
      }
    },
  }
</script>
<style lang="scss" scoped>
  .container {
    display: flex;
  }
  .left-group,
  .right-group {
    width: 200px;
    background-color: #7ecff2;
    text-align: center;
  }
  .mid-group {
    flex: 1;
    background-color: #ff5000;
    text-align: center;
  }
  .box {
    position: relative;
  }
  .components {
    position: absolute;
  }
</style>
